<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}

			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}

			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}

			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}

			.oa-contact-avatar {
				width: 75px;
			}

			.oa-contact-avatar img {
				border-radius: 50%;
			}

			.oa-contact-content {
				width: 100%;
			}

			.oa-contact-name {
				margin-right: 20px;
			}

			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li id="chat-container"></li>
			</ul>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});

		function fetchPosts() {
			myUID="100000002";
		    fetch('http://tcp.gykang.eu.org:8080/api/chat/list?mid='+myUID) // 获取后端提供的帖子数据
		        .then(response => response.json())
		        .then(data => {
		            const postsContainer = document.getElementById("chat-container");
		            postsContainer.innerHTML = ""; // 清空现有内容
		
		            data.forEach(post => {
		                // 创建一个帖子容器
		                const userInfo = document.createElement("li");
		                userInfo.classList.add("user-info");
		                userInfo.innerHTML = `
		                    <li class="mui-table-view-cell">
		                        <div class="mui-slider-cell" id="list">
		                            <div class="oa-contact-cell mui-table">
		                                <div class="oa-contact-avatar mui-table-cell">
		                                    <img src="../images/60x60.gif" />
		                                </div>
		                                <div class="oa-contact-content mui-table-cell">
		                                    <div class="mui-clearfix">
		                                        <h4 class="oa-contact-name">${post.name}</h4>
		                                        <span class="oa-contact-position mui-h6">${post.uid}</span>
		                                    </div>
		                                    <p class="oa-contact-email mui-h6">
		                                        ${post.email}
		                                    </p>
		                                </div>
		                            </div>
		                        </div>
		                    </li>
		                `;
		                
		                // 将帖子添加到页面中
		                postsContainer.appendChild(userInfo);
		            });
		
		            // 在数据加载完成后，绑定点击事件
		            const listItems = document.querySelectorAll('.mui-table-view-cell');
		            listItems.forEach(function(item) {
		                item.addEventListener('click', function() {
		                    // 获取 id
		                    const id = item.querySelector('.oa-contact-position').textContent;
		
		                    // 设置 Cookie，记录 id
		                    localStorage.setItem('chatID',id);
							const chatID = localStorage.getItem('chatID');
		                    // 跳转到新页面
							if (window.plus) {
								plus.webview.open('chat.html', 'new', {}, 'slide-in-right', 200); 
							}else{
								window.open('chat.html', 'new', {}, 'slide-in-right', 200); 
							}
		                });
		            });
		        })
		        .catch(error => {
		            console.error("获取帖子数据失败:", error);
		        });
		}
		
		// 页面加载时调用 fetchPosts 函数
		document.addEventListener('DOMContentLoaded', fetchPosts);

	</script>
</html>